<template>
  <PageWrapper>
    <div class="bg">
      <a-space direction="vertical" style="width: 100%" :size="20">
        <a-alert message="使用 useDrawer 进行抽屉操作" show-icon />
        <a-button type="primary" class="my-4" @click="openDrawerLoading"> 打开Drawer </a-button>
        <a-alert message="内外同时控制显示隐藏" show-icon />
        <a-button type="primary" class="my-4" @click="openDrawer2"> 打开Drawer </a-button>

        <a-alert message="自适应高度/显示footer" show-icon />
        <a-button type="primary" class="my-4" @click="openDrawerLoading3"> 打开Drawer </a-button>
        <a-alert message="详情页模式" show-icon />
        <a-button type="primary" class="my-4" @click="openDrawer4"> 打开详情Drawer </a-button>
      </a-space>
      <BasicDrawer @register="register1" title="Drawer Title" width="50%"> Drawer Info. </BasicDrawer>
      <BasicDrawer
        @register="register3"
        title="Drawer Title"
        width="50%"
        showFooter
        isAbsolute
        @ok="handleOk"
        :mask="false"
        getContainer=".page-wrapper"
      >
        <p class="h-20" v-for="index in 40" :key="index">根据屏幕高度自适应</p>
      </BasicDrawer>
      <BasicDrawer @register="register4" title="Drawer Title5" :isDetail="true">
        <p class="h-20">Content Message</p>
        <template #titleToolbar> toolbar </template>
      </BasicDrawer>
      <Drawer2 @register="register2" />
    </div>
  </PageWrapper>
</template>

<script lang="ts" setup name="assemblyDrawer">
import { reactive, ref } from 'vue'
import PageWrapper from '@/components/PageWrapper/index.vue'
import { BasicDrawer, useDrawer } from '@/components/Drawer/index'
import Drawer2 from './Drawer2.vue'

const [register1, { openDrawer: openDrawer1, setDrawerProps }] = useDrawer()
const [register2, { openDrawer: openDrawer2 }] = useDrawer()
const [register3, { openDrawer: openDrawer3, setDrawerProps: setDrawerProps3, closeDrawer: closeDrawer3 }] = useDrawer()
const [register4, { openDrawer: openDrawer4 }] = useDrawer()

function openDrawerLoading() {
  openDrawer1()
  setDrawerProps({ loading: true })
  setTimeout(() => {
    setDrawerProps({ loading: false })
  }, 2000)
}
function openDrawerLoading3() {
  openDrawer3()
  setDrawerProps3({ loading: true, confirmLoading: true })
  setTimeout(() => {
    setDrawerProps3({ loading: false, confirmLoading: false })
  }, 5000)
}
const handleOk = () => {
  closeDrawer3()
}
</script>

<style lang="less" scoped>
.bg {
  width: 100%;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
</style>
